<template>
  <div class="commission-statistic">
    <div class="commission-statistic__top">
      <el-popover
        placement="top"
        width="290"
        trigger="hover"
        content="预计佣金=下级会员佣金+下级代理佣金+上分返利；下级会员佣金=（（公司总输赢-支出费用）+上月累计）×佣金比例">
        <div slot="reference">
          预计佣金
          <svg-icon icon-class="faq"></svg-icon>
        </div>
      </el-popover>
    </div>
    <div class="commission-statistic__amount">¥ <tween-number :value="amount"></tween-number></div>
    <div class="commission-statistic__last-amount" v-if="lastAmount>=0">上月实际发放：<tween-number :value="lastAmount"></tween-number>元</div>
    <div class="commission-statistic__percentage">
      <span v-if="amount>0">佣金比例 <tween-number :value="percentage" :is-filter="false"></tween-number>%</span>
      <el-popover
        v-else
        placement="top"
        width="300"
        trigger="hover"
        content="注：当公司净输赢为负数时候（会员盈利），佣金比例默认为0%">
        <div slot="reference">
          佣金比例 <tween-number :value="percentage" :is-filter="false"></tween-number>%
          <svg-icon icon-class="faq"></svg-icon>
        </div>
      </el-popover>
    </div>
    <!--<div class="commission-statistic__refresh" @click="$emit('refresh')">-->
      <!--<svg-icon icon-class="refresh"></svg-icon>-->
    <!--</div>-->
  </div>
</template>

<script>
  export default {
    name: "commission-statistics",

    props: ['amount', 'last-amount', 'percentage'],
  }
</script>

<style lang="scss" scoped>
  @include b(commission-statistic) {
    width: 280px;
    /*width: 220px;*/
    height:200px;
    box-sizing: border-box;

    background: rgba(233, 129, 29, 1);
    box-shadow:0 6px 30px 0 rgba(0,0,0,0.05);
    border-radius: $--border-radius-base;

    text-align: center;
    padding: 24px 0 10px 0;
    position: relative;
    color: $--color-white;

    @include e(top) {
      font-size: $--font-size-small;
      margin-bottom: 24px;
    }

    @include e(amount) {
      font-size:22px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    @include e(last-amount) {
      color: rgba(255, 255, 255, 0.8);
      padding-bottom: 20px;
      display: inline-block;
      border-bottom: 1px solid rgba(234, 234, 234, 1);
      margin: 0 auto 15px;
    }

    @include e(percentage) {
      font-size: $--font-size-small;
    }

    @include e(refresh) {
      cursor: pointer;
      position: absolute;
      top: 17px;
      right: 17px;
      width: 17px;
      height: 17px;
      .svg-icon {
        width: 14px;
        height: 14px;
      }
    }
  }
</style>